<!doctype html>
<html>
    <head>

        <title>jsPlumb - draggable connectors demonstration</title>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
        <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
        <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
        <link href="//fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">

        <link rel="stylesheet" href="../../css/jsPlumbToolkit-defaults.css">
        <link rel="stylesheet" href="../../css/main.css">
        <link rel="stylesheet" href="../../css/jsPlumbToolkit-demo.css">
        <link rel="stylesheet" href="demo.css">
    </head>
    <body data-demo-id="draggableConnectors" data-library="dom">
    <div class="navbar navbar-top navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

                <a class="navbar-brand" href="/"><img src="../../img/logo-medium-jsplumb.png"></a>

            </div>

            <div class="navbar-collapse collapse nav-wrapper">
                <ul class="nav navbar-nav">
                    <li><a href="/">DEMOS</a></li>
                    <li><a href="/doc/home.html">DOCS</a></li>
                    <li><a href="/download">DOWNLOAD</a></li>
                    <li><a href="http://beta.jsplumbtoolkit.com/contact.html">CONTACT</a></li>
                    <li><a href="https://blog.jsplumbtoolkit.com">BLOG</a></li>
                </ul>

                <div class="apidoc-jsplumb-logo"><div class="container"><img src="/img/logo-docs-jsplumb.png"></div></div>

                <div class="social-nav hidden-xs">
                    <!--a href="#" class="link"><span class="icon-facebook"></span></a-->
                    <a href="http://twitter.com/jsplumblib" class="link"><span class="icon-twitter"></span></a>
                    <a href="http://github.com/sporritt/jsplumb/" class="link"><span class="icon-github"></span></a>
                    <a href="http://www.linkedin.com/company/jsplumb" class="link"><span class="icon-linkedin"></span></a>

                </div>
            </div><!--/.nav-collapse -->
        </div>
    </div>

        <div class="jtk-demo-main">
            <!-- demo -->
            <div class="jtk-demo-canvas canvas-wide drag-drop-demo jtk-surface jtk-surface-nopan" id="canvas">
                <div class="window" id="dragDropWindow1">one<br/><br/><a href="#" class="cmdLink hide" rel="dragDropWindow1">toggle connections</a><br/><a href="#" class="cmdLink drag" rel="dragDropWindow1">disable dragging</a><br/><a href="#" class="cmdLink detach" rel="dragDropWindow1">detach all</a></div>
                <div class="window" id="dragDropWindow2">two<br/><br/><a href="#" class="cmdLink hide" rel="dragDropWindow2">toggle connections</a><br/><a href="#" class="cmdLink drag" rel="dragDropWindow2">disable dragging</a><br/><a href="#" class="cmdLink detach" rel="dragDropWindow2">detach all</a></div>
                <div class="window" id="dragDropWindow3">three<br/><br/><a href="#" class="cmdLink hide" rel="dragDropWindow3">toggle connections</a><br/><a href="#" class="cmdLink drag" rel="dragDropWindow3">disable dragging</a><br/><a href="#" class="cmdLink detach" rel="dragDropWindow3">detach all</a></div>
                <div class="window" id="dragDropWindow4">four<br/><br/><a href="#" class="cmdLink hide" rel="dragDropWindow4">toggle connections</a><br/><a href="#" class="cmdLink drag" rel="dragDropWindow4">disable dragging</a><br/><a href="#" class="cmdLink detach" rel="dragDropWindow4">detach all</a></div>
                <div id="list"></div>
            </div>
			<!-- /demo -->
            <!-- explanation -->
            <!--<div class="description">
                <h4>DRAG &amp; DROP</h4>
                <p>Drag from any Endpoint to similar Endpoints on other elements to create Connections.</p>
                <p>Blue Endpoints use a <strong>beforeDrop</strong> interceptor.  This enables
                    you to intercept a new connection and decide whether or not you wish to allow it to proceed. They are also configured to automatically reattach if you drag a Connection off and drop it on the background.</p>
                <p>Yellow Endpoints are configured to use a <strong>beforeDetach</strong> interceptor, which provides a way to programmatically override a Connection detach. Yellow connections are painted with the Straight connector</p>
                <p>Green Endpoints support up to three Connections. Once a green Endpoint has three connections, when you drag from it you will drag the oldest connection made on the Endpoint.</p>
                <div class="commands">
                    <a id="clear" class="cmd" href="#">clear plumbing</a>
                </div>
            </div>-->
            <div class="description">
                <h4>拖放</h4>
                <p>阻力来自任何端点到端点上的类似的其他元素创建连接。</p>
                <p>蓝色端点使用<strong>beforedrop</strong>拦截器。这使得你们拦截到了一个新的连接和决定是否要允许其继续进行。它们也自动地重新 “那如果连接断开 ， 并将其放到后台。</p>
                <p>黄的端点配置为使用<strong>beforedetach</strong>拦截器提供了试验基础以编程方式连接超越相对超脱。黄色的连接与直线连接器</p>
                <p>绿色端点支持多达三个连接。一旦一个绿色的端点都有三个连接 ， 当你从它的阻力会拖拽你最古老的连接端点上。</p>
                <div class="commands">
                    <a id="clear" class="cmd" href="#">明确管道</a>
                </div>
            </div>
            <!-- /explanation -->
        </div>


        <!-- JS -->
        <!-- support lib for bezier stuff -->
        <script src="../../lib/jsBezier-0.7.js"></script>
        <!-- event adapter -->
		<script src="../../lib/mottle-0.7.1.js"></script>
		<!-- geometry functions -->
        <script src="../../lib/biltong-0.2.js"></script>
		<!-- drag -->
        <script src="../../lib/katavorio-0.13.0.js"></script>
        <!-- jsplumb util -->
        <script src="../../src/util.js"></script>
        <script src="../../src/browser-util.js"></script>
        <!-- main jsplumb engine -->
        <script src="../../src/jsPlumb.js"></script>
        <!-- base DOM adapter -->
        <script src="../../src/dom-adapter.js"></script>
        <script src="../../src/overlay-component.js"></script>
        <!-- endpoint -->
        <script src="../../src/endpoint.js"></script>
        <!-- connection -->
        <script src="../../src/connection.js"></script>
        <!-- anchors -->
        <script src="../../src/anchors.js"></script>
        <!-- connectors, endpoint and overlays  -->
        <script src="../../src/defaults.js"></script>
        <!-- bezier connectors -->
        <script src="../../src/connectors-bezier.js"></script>
        <!-- state machine connectors -->
        <script src="../../src/connectors-statemachine.js"></script>
        <!-- flowchart connectors -->
        <script src="../../src/connectors-flowchart.js"></script>
        <!-- SVG renderer -->
        <script src="../../src/renderers-svg.js"></script>

        <!-- common adapter -->
        <script src="../../src/base-library-adapter.js"></script>
        <!-- no library jsPlumb adapter -->
        <script src="../../src/dom.jsPlumb.js"></script>
        <!-- /JS -->

		<!--  demo code -->
		<script src="demo.js"></script>

        <script src="../demo-list.js"></script>

    </body>
</html>
